<template>
  <el-scrollbar height="calc(100vh - 50px)">
    <div class="performance-dashboard">
      <!-- 性能指标卡片 -->
      <el-row :gutter="15" class="mb-24">
        <el-col v-for="(item, index) in performanceMetrics" :key="index" 
                :xs="24" :sm="12" :md="8" :lg="6" :xl="3"
                class="mb-16 metric-col">
          <el-card shadow="hover" class="metric-card hover-scale" v-loading="loading">
            <div class="metric-header">
              <div class="metric-icon" :style="{ background: item.gradient }">
                <el-icon><component :is="item.icon" /></el-icon>
              </div>
              <div class="metric-info">
                <div class="metric-title">{{ item.name }}</div>
                <countTo
                  class="metric-value"
                  :start-val="0"
                  :end-val="item.value"
                  :duration="2000"
                  :decimals="item.decimals || 0">
                </countTo>
                <div class="metric-unit">{{ item.unit }}</div>
              </div>
            </div>
            <div class="metric-trend">
              <div class="trend-info">
                <span class="trend-label">{{ item.trendLabel }}</span>
                <span class="trend-value" :class="item.trendClass">
                  <el-icon><component :is="item.trendIcon" /></el-icon>
                  {{ item.trendValue }}
                </span>
              </div>
              <div class="metric-status" :class="item.statusClass">
                <el-icon><component :is="item.statusIcon" /></el-icon>
                {{ item.status }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 实时监控图表 -->
      <el-row :gutter="20" class="mb-24">
        <el-col :xs="24" :sm="24" :md="16" :lg="16" class="mb-16">
          <el-card shadow="hover" class="chart-card" v-loading="loading">
            <template #header>
              <div class="card-header-flex">
                <div class="header-title">
                  <strong>实时性能监控</strong>
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="header-controls">
                  <el-button-group>
                    <el-button 
                      v-for="period in timePeriods" 
                      :key="period.value"
                      :type="selectedPeriod === period.value ? 'primary' : 'default'"
                      size="small"
                      @click="changeTimePeriod(period.value)">
                      {{ period.label }}
                    </el-button>
                  </el-button-group>
                  <el-switch
                    v-model="autoRefresh"
                    active-text="自动刷新"
                    inactive-text="手动"
                    size="small"
                    class="ml-12" />
                </div>
              </div>
            </template>
            <div class="chart-container">
              <PerformanceMonitorChart 
                :chartData="realTimeData"
                :timeRange="selectedPeriod"
                :autoRefresh="autoRefresh" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" class="mb-16">
          <el-card shadow="hover" class="chart-card" v-loading="loading">
            <template #header>
              <div class="card-header-flex">
                <div class="header-title">
                  <strong>系统资源使用率</strong>
                  <el-icon><Cpu /></el-icon>
                </div>
              </div>
            </template>
            <div class="chart-container">
              <ResourceUsageChart :resourceData="resourceData" />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 性能分析图表 -->
      <el-row :gutter="20" class="mb-24">
        <el-col :xs="24" :sm="24" :md="12" :lg="8" class="mb-16">
          <el-card shadow="hover" class="chart-card" v-loading="loading">
            <template #header>
              <div class="card-header-flex">
                <div class="header-title">
                  <strong>响应时间分布</strong>
                  <el-icon><Timer /></el-icon>
                </div>
              </div>
            </template>
            <div class="chart-container">
              <ResponseTimeDistributionChart :distributionData="responseTimeData" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" class="mb-16">
          <el-card shadow="hover" class="chart-card" v-loading="loading">
            <template #header>
              <div class="card-header-flex">
                <div class="header-title">
                  <strong>错误率趋势</strong>
                  <el-icon><Warning /></el-icon>
                </div>
              </div>
            </template>
            <div class="chart-container">
              <ErrorRateChart :errorData="errorRateData" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" class="mb-16">
          <el-card shadow="hover" class="chart-card" v-loading="loading">
            <template #header>
              <div class="card-header-flex">
                <div class="header-title">
                  <strong>并发用户数</strong>
                  <el-icon><User /></el-icon>
                </div>
              </div>
            </template>
            <div class="chart-container">
              <ConcurrentUsersChart :userData="concurrentUsersData" />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 性能任务状态 -->
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" class="mb-16">
          <el-card shadow="hover" class="task-card" v-loading="loading">
            <template #header>
              <div class="card-header-flex">
                <div class="header-title">
                  <strong>性能任务状态</strong>
                  <el-icon><List /></el-icon>
                </div>
                <el-button type="primary" size="small" @click="refreshTasks">
                  <el-icon><Refresh /></el-icon>
                  刷新
                </el-button>
              </div>
            </template>
            <div class="task-list">
              <div v-for="task in performanceTasks" :key="task.id" class="task-item">
                <div class="task-info">
                  <div class="task-name">{{ task.name }}</div>
                  <div class="task-desc">{{ task.description }}</div>
                  <div class="task-meta">
                    <span class="task-time">{{ task.startTime }}</span>
                    <span class="task-duration">运行时长: {{ task.duration }}</span>
                  </div>
                </div>
                <div class="task-status">
                  <el-tag :type="task.statusType" size="small">{{ task.status }}</el-tag>
                  <div class="task-progress">
                    <el-progress 
                      :percentage="task.progress" 
                      :status="task.progressStatus"
                      :stroke-width="6" />
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" class="mb-16">
          <el-card shadow="hover" class="alert-card" v-loading="loading">
            <template #header>
              <div class="card-header-flex">
                <div class="header-title">
                  <strong>性能告警</strong>
                  <el-icon><Bell /></el-icon>
                </div>
                <el-badge :value="activeAlerts.length" class="alert-badge">
                  <el-button type="danger" size="small" @click="viewAllAlerts">
                    查看全部
                  </el-button>
                </el-badge>
              </div>
            </template>
            <div class="alert-list">
              <div v-for="alert in activeAlerts" :key="alert.id" class="alert-item">
                <div class="alert-icon" :class="alert.level">
                  <el-icon><component :is="alert.icon" /></el-icon>
                </div>
                <div class="alert-content">
                  <div class="alert-title">{{ alert.title }}</div>
                  <div class="alert-message">{{ alert.message }}</div>
                  <div class="alert-time">{{ alert.time }}</div>
                </div>
                <div class="alert-actions">
                  <el-button type="text" size="small" @click="acknowledgeAlert(alert.id)">
                    确认
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script>
import { ElCard, ElRow, ElCol, ElButton, ElButtonGroup, ElSwitch, ElTag, ElProgress, ElBadge } from 'element-plus';
import countTo from '../../components/to';
import PerformanceMonitorChart from '../../components/echart/PerformanceMonitorChart.vue';
import ResourceUsageChart from '../../components/echart/ResourceUsageChart.vue';
import ResponseTimeDistributionChart from '../../components/echart/ResponseTimeDistributionChart.vue';
import ErrorRateChart from '../../components/echart/ErrorRateChart.vue';
import ConcurrentUsersChart from '../../components/echart/ConcurrentUsersChart.vue';
import { 
  Monitor, Cpu, Timer, Warning, User, List, Refresh, Bell,
  Top, Bottom, TrendCharts, DataAnalysis, Lightning, Stopwatch,
  Connection
} from '@element-plus/icons-vue';

export default {
  name: 'Performance',
  components: {
    ElCard, ElRow, ElCol, ElButton, ElButtonGroup, ElSwitch, ElTag, ElProgress, ElBadge,
    countTo,
    PerformanceMonitorChart,
    ResourceUsageChart,
    ResponseTimeDistributionChart,
    ErrorRateChart,
    ConcurrentUsersChart,
    Monitor, Cpu, Timer, Warning, User, List, Refresh, Bell,
    Top, Bottom, TrendCharts, DataAnalysis, Lightning, Stopwatch,
    Connection
  },
  data() {
    return {
      loading: false,
      autoRefresh: true,
      selectedPeriod: '1h',
      timePeriods: [
        { label: '1小时', value: '1h' },
        { label: '6小时', value: '6h' },
        { label: '24小时', value: '24h' },
        { label: '7天', value: '7d' }
      ],
      // 性能指标数据
      performanceMetrics: [
        {
          name: '平均响应时间',
          value: 245.6,
          unit: 'ms',
          decimals: 1,
          icon: 'Timer',
          gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          trendLabel: '较昨日',
          trendValue: '+12.3%',
          trendClass: 'trend-up',
          trendIcon: 'Top',
          status: '正常',
          statusClass: 'status-normal',
          statusIcon: 'TrendCharts'
        },
        {
          name: '吞吐量',
          value: 1250,
          unit: 'req/s',
          icon: 'DataAnalysis',
          gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
          trendLabel: '较昨日',
          trendValue: '+8.7%',
          trendClass: 'trend-up',
          trendIcon: 'Top',
          status: '优秀',
          statusClass: 'status-excellent',
          statusIcon: 'TrendCharts'
        },
        {
          name: '错误率',
          value: 0.85,
          unit: '%',
          decimals: 2,
          icon: 'Warning',
          gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
          trendLabel: '较昨日',
          trendValue: '-2.1%',
          trendClass: 'trend-down',
          trendIcon: 'Bottom',
          status: '良好',
          statusClass: 'status-good',
          statusIcon: 'TrendCharts'
        },
        {
          name: '并发用户',
          value: 850,
          unit: 'users',
          icon: 'User',
          gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
          trendLabel: '较昨日',
          trendValue: '+15.2%',
          trendClass: 'trend-up',
          trendIcon: 'Top',
          status: '正常',
          statusClass: 'status-normal',
          statusIcon: 'TrendCharts'
        },
        {
          name: 'CPU使用率',
          value: 68.5,
          unit: '%',
          decimals: 1,
          icon: 'Cpu',
          gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
          trendLabel: '较昨日',
          trendValue: '+5.3%',
          trendClass: 'trend-up',
          trendIcon: 'Top',
          status: '注意',
          statusClass: 'status-warning',
          statusIcon: 'Warning'
        },
        {
          name: '内存使用率',
          value: 72.3,
          unit: '%',
          decimals: 1,
          icon: 'Monitor',
          gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
          trendLabel: '较昨日',
          trendValue: '+3.8%',
          trendClass: 'trend-up',
          trendIcon: 'Top',
          status: '正常',
          statusClass: 'status-normal',
          statusIcon: 'TrendCharts'
        },
        {
          name: '网络I/O',
          value: 156.8,
          unit: 'MB/s',
          decimals: 1,
          icon: 'Connection',
          gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
          trendLabel: '较昨日',
          trendValue: '+22.5%',
          trendClass: 'trend-up',
          trendIcon: 'Top',
          status: '正常',
          statusClass: 'status-normal',
          statusIcon: 'TrendCharts'
        },

      ],
      // 实时监控数据
      realTimeData: {
        timestamps: [],
        responseTime: [],
        throughput: [],
        errorRate: [],
        cpuUsage: []
      },
      // 资源使用数据
      resourceData: {
        cpu: 68.5,
        memory: 72.3,
        disk: 45.2,
        network: 23.8,
        networkIO: 156.8
      },
      // 响应时间分布数据
      responseTimeData: {
        categories: ['<100ms', '100-200ms', '200-500ms', '500-1000ms', '>1000ms'],
        values: [25, 35, 20, 15, 5]
      },
      // 错误率数据
      errorRateData: {
        timestamps: [],
        values: []
      },
      // 并发用户数据
      concurrentUsersData: {
        timestamps: [],
        values: []
      },
      // 性能任务数据
      performanceTasks: [
        {
          id: 1,
          name: '用户登录接口压测',
          description: '测试用户登录接口在高并发下的性能表现',
          startTime: '2024-01-15 10:30:00',
          duration: '2小时15分钟',
          status: '运行中',
          statusType: 'primary',
          progress: 65,
          progressStatus: 'success'
        },
        {
          id: 2,
          name: '订单查询接口测试',
          description: '验证订单查询接口的响应时间和吞吐量',
          startTime: '2024-01-15 09:00:00',
          duration: '1小时45分钟',
          status: '已完成',
          statusType: 'success',
          progress: 100,
          progressStatus: 'success'
        },
        {
          id: 3,
          name: '支付接口性能测试',
          description: '测试支付接口在峰值负载下的稳定性',
          startTime: '2024-01-15 08:00:00',
          duration: '3小时30分钟',
          status: '已暂停',
          statusType: 'warning',
          progress: 45,
          progressStatus: 'warning'
        }
      ],
      // 告警数据
      activeAlerts: [
        {
          id: 1,
          title: '响应时间异常',
          message: '用户登录接口平均响应时间超过500ms',
          time: '2分钟前',
          level: 'warning',
          icon: 'Timer'
        },
        {
          id: 2,
          title: 'CPU使用率过高',
          message: '服务器CPU使用率持续超过80%',
          time: '5分钟前',
          level: 'error',
          icon: 'Cpu'
        },
        {
          id: 3,
          title: '内存使用率警告',
          message: '内存使用率接近阈值，建议优化',
          time: '10分钟前',
          level: 'info',
          icon: 'Monitor'
        }
      ]
    };
  },
  methods: {
    changeTimePeriod(period) {
      this.selectedPeriod = period;
      this.loadPerformanceData();
    },
    loadPerformanceData() {
      this.loading = true;
      // 模拟数据加载
      setTimeout(() => {
        this.generateDemoData();
        this.loading = false;
      }, 1000);
    },
    generateDemoData() {
      // 生成实时监控数据
      const now = new Date();
      const timestamps = [];
      const responseTime = [];
      const throughput = [];
      const errorRate = [];
      const cpuUsage = [];

      for (let i = 0; i < 60; i++) {
        const time = new Date(now.getTime() - (60 - i) * 60000);
        timestamps.push(time.toLocaleTimeString());
        responseTime.push(Math.random() * 200 + 150);
        throughput.push(Math.random() * 500 + 1000);
        errorRate.push(Math.random() * 2);
        cpuUsage.push(Math.random() * 30 + 50);
      }

      this.realTimeData = { timestamps, responseTime, throughput, errorRate, cpuUsage };

      // 生成错误率趋势数据
      const errorTimestamps = [];
      const errorValues = [];
      for (let i = 0; i < 24; i++) {
        const time = new Date(now.getTime() - (24 - i) * 3600000);
        errorTimestamps.push(time.toLocaleTimeString());
        errorValues.push(Math.random() * 3 + 0.5);
      }
      this.errorRateData = { timestamps: errorTimestamps, values: errorValues };

      // 生成并发用户数据
      const userTimestamps = [];
      const userValues = [];
      for (let i = 0; i < 24; i++) {
        const time = new Date(now.getTime() - (24 - i) * 3600000);
        userTimestamps.push(time.toLocaleTimeString());
        userValues.push(Math.random() * 500 + 600);
      }
      this.concurrentUsersData = { timestamps: userTimestamps, values: userValues };
    },
    refreshTasks() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.success('任务状态已刷新');
      }, 1000);
    },
    viewAllAlerts() {
      this.$message.info('查看全部告警功能待实现');
    },
    acknowledgeAlert(alertId) {
      this.activeAlerts = this.activeAlerts.filter(alert => alert.id !== alertId);
      this.$message.success('告警已确认');
    }
  },
  mounted() {
    this.loadPerformanceData();
    // 设置自动刷新
    if (this.autoRefresh) {
      this.refreshInterval = setInterval(() => {
        this.generateDemoData();
      }, 30000); // 每30秒刷新一次
    }
  },
  beforeUnmount() {
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  },
  watch: {
    autoRefresh(newVal) {
      if (newVal) {
        this.refreshInterval = setInterval(() => {
          this.generateDemoData();
        }, 30000);
      } else {
        if (this.refreshInterval) {
          clearInterval(this.refreshInterval);
        }
      }
    }
  }
};
</script>

<style scoped>
.performance-dashboard {
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: calc(100vh - 50px);
}

/* 响应式间距 */
.mb-16 {
  margin-bottom: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.ml-12 {
  margin-left: 12px;
}

/* 卡片样式 */
.el-card {
  --el-card-border-color: transparent;
  --el-card-border-radius: 16px;
  --el-card-padding: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  overflow: hidden;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.98);
}

.hover-scale:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.3);
}

/* 指标卡片样式 */
.metric-card {
  height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.6);
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--metric-gradient);
  opacity: 0.8;
}

.metric-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.metric-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.metric-info {
  flex: 1;
}

.metric-title {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
  line-height: 1.2;
}

.metric-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
  margin-bottom: 2px;
}

.metric-unit {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.metric-trend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.trend-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trend-label {
  font-size: 11px;
  color: #64748b;
}

.trend-value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.metric-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
}

.status-normal {
  background: #d1fae5;
  color: #059669;
}

.status-excellent {
  background: #dbeafe;
  color: #2563eb;
}

.status-good {
  background: #fef3c7;
  color: #d97706;
}

.status-warning {
  background: #fef2f2;
  color: #dc2626;
}

/* 图表卡片样式 */
.chart-card {
  height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.6);
}

.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.header-title i {
  font-size: 18px;
  color: #6366f1;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-container {
  height: calc(100% - 60px);
  padding: 20px;
}

/* 任务卡片样式 */
.task-card {
  height: 100%;
}

.task-list {
  max-height: 400px;
  overflow-y: auto;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s ease;
}

.task-item:hover {
  background-color: #f8fafc;
}

.task-item:last-child {
  border-bottom: none;
}

.task-info {
  flex: 1;
  margin-right: 16px;
}

.task-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.task-desc {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
}

.task-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: #94a3b8;
}

.task-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 120px;
}

.task-progress {
  width: 100px;
}

/* 告警卡片样式 */
.alert-card {
  height: 100%;
}

.alert-badge {
  margin-left: 8px;
}

.alert-list {
  max-height: 400px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s ease;
}

.alert-item:hover {
  background-color: #f8fafc;
}

.alert-item:last-child {
  border-bottom: none;
}

.alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.alert-icon.warning {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.alert-icon.error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.alert-icon.info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.alert-content {
  flex: 1;
  min-width: 0;
}

.alert-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.alert-message {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
  line-height: 1.4;
}

.alert-time {
  font-size: 11px;
  color: #94a3b8;
}

.alert-actions {
  flex-shrink: 0;
}

/* 指标卡片布局优化 */
.metric-col {
  flex: 0 0 auto;
}

/* 大屏幕下优化七个卡片的布局 */
@media (min-width: 1200px) {
  .metric-col {
    flex: 0 0 calc(14.285% - 12px); /* 100% / 7 - gutter */
    max-width: calc(14.285% - 12px);
  }
}

/* 中等屏幕下优化布局 */
@media (min-width: 768px) and (max-width: 1199px) {
  .metric-col {
    flex: 0 0 calc(25% - 12px); /* 100% / 4 - gutter */
    max-width: calc(25% - 12px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .performance-dashboard {
    padding: 12px;
  }
  
  .card-header-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .header-controls {
    width: 100%;
    justify-content: space-between;
  }
  
  .task-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .task-status {
    width: 100%;
    align-items: flex-start;
  }
  
  .alert-item {
    flex-direction: column;
    gap: 8px;
  }
  
  .alert-actions {
    align-self: flex-end;
  }
}

/* 滚动条样式 */
.task-list::-webkit-scrollbar,
.alert-list::-webkit-scrollbar {
  width: 6px;
}

.task-list::-webkit-scrollbar-track,
.alert-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.task-list::-webkit-scrollbar-thumb,
.alert-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.task-list::-webkit-scrollbar-thumb:hover,
.alert-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style> 